<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="robots" content="nofollow" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="">
        <meta name="author" content="">
        <title>双辉旅程网后台管理</title>
        <!-- Bootstrap core CSS -->
        <link href="/css/bootstrap.css" rel="stylesheet">
        <!-- Add custom CSS here -->
        <link href="/css/sh-admin.css" rel="stylesheet">
        <!-- JavaScript -->
        <script src="/js/jquery-1.10.2.js"></script>
        <script src="/js/bootstrap.js"></script>
    </head>
    <body style="background:#315169;">
        <div class="container">
            <div class="row">
                <div class="col-md-6 col-md-offset-3">
                    <div class="logo"><img src="/img/logo.png" /></div>
                    <!-- 登录框start -->
                    <div class="login">
                        <h3 class="text-center">营地管理员登录</h3><br>
                        <form class="form-horizontal" role="form" action="{:url('/campmanager/login')}" method="post">
                            <div class="form-group">
                              <label for="firstname" class="col-sm-2 control-label">账号</label>
                              <div class="col-sm-7">
                                 <input type="text" class="form-control" id="firstname" name="phone" 
                                    placeholder="请输入管理员账号">
                              </div>
                              <div class="col-sm-3">
                                 <span id="phoneerror" class="text-danger"></span>
                              </div>
                            </div>
                            <div class="form-group">
                              <label for="lastname" class="col-sm-2 control-label">密码</label>
                              <div class="col-sm-7">
                                 <input class="form-control" id="lastname" name="password" 
                                    placeholder="请正确输入密码" type="password">
                              </div>
                            </div>
                            <div class="form-group">
                              <label class="col-xs-2 control-label">验证码</label>
                              <div class="col-xs-5">
                                <input type="text" class="form-control" id="name" name="code" placeholder="请输入验证码" />
                              </div>
                              <div class="col-xs-5  col-sm-6 col-md-5" style="padding: 0 0;">
                                <img id="captcha_img" style="cursor: pointer;" onclick="this.src='{:captcha_src()}?d='+Math.random();" alt="点击更换" title="点击更换" src="{:captcha_src()}" class="m">
                                <span title="点击图片切换验证码" id="codeerror" class="text-danger">点击图片更换</span>
                              </div>
                            </div>
                            <div class="form-group">
                              <div class="col-sm-offset-2 col-sm-10">
                                 <input  type="submit" value="登录" class="btn btn-primary"><a href="/campmanager/forgetpassword">忘记密码</a>
                              </div>
                            </div>
                        </form>
                    </div>
                    <!-- 登录框end -->
                    <div class="footer navbar-fixed-bottom text-center"><p>双辉盛业旅游开发股份有限公司 版权所有</p></div>
                </div>
            </div>
        </div>
    </body>
</html>

<script type="text/javascript" src="/jquery.js"></script>
<script src="/front/js/js.js"></script>
<script type="text/javascript">
  $(function(){
    //账号验证
    $("input[name='phone']").blur(function(){
      var phone = $('input[name="phone"]').val();
      //不能为空
      if(!$.trim(phone)) {
      $("input[name='phone']").css({border: "1px solid red"});
      $("#phoneerror").html("请输入手机号");
      return false;
      }
      //手机号格式是否满足
      if((/^1[3|4|5|7|8]\d{9}$/.test(phone)) || (/(^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+\.[a-zA-Z0-9_-]+$)|(^$)/.test(phone))){
        $("input[name='phone']").css({border: "1px solid green"});
        $("#phoneerror").html("");
      }else {
        $("input[name='phone']").css({border: "1px solid red"});
        $("#phoneerror").html("格式不正确");
        return false;
      }
    })
    //验证码验证
      $('input[name="code"]').keyup(function(){
        var code = $('input[name="code"]').val().length;
        if (code>3) {
          var code = $('input[name="code"]').val();
        //不能为空
        if(!$.trim(code)) {
        $("input[name='code']").css({border: "1px solid red"});
        $("#codeerror").html("请输入验证码");
        return false;
        }else {
          $.get('/campmanager/checkcode?code='+$("input[name='code']").val(),function(data) {
          $("input[name='code']").css({border: "1px solid green"});
          $("#codeerror").html("");
          if (data===0) {
            $("input[name='code']").css({border: "1px solid red"});
            $("#codeerror").html("验证码错误");
          }
        });
          }
        }
      })  
  })
</script>